<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-05-22 16:05:15
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-28 11:47:32
 * @FilePath: \cxl-h5\src\components\loginHintDialog.vue
-->
<template>
    <Transition name="fade" mode="out-in" appear>
        <!--  @click.self="onHide" -->
        <section class="login-hint-dialog-bg" v-if="uStore.loginHintStatus"></section>
    </Transition>
    <Transition name="scale" mode="out-in" appear>
        <!--  @click.self="onHide" -->
        <section class="login-hint-dialog" v-if="uStore.loginHintStatus" @click.self="onHide">
            <section class="dialog-box">
                <h1>温馨提示</h1>
                <p>登录后才能进行相关功能操作</p>
                <section class="btn" @click="onLogin">登录</section>
            </section>
        </section>
    </Transition>
</template>
<script setup lang="ts">
import { userStore } from '@/store/user.store'
import { useRouter } from 'vue-router'
// import router from '@/router'

const router = useRouter()

const uStore = userStore()

const onHide = () => {
    uStore.loginHintStatus = false
}
const onLogin = () => {
    onHide()
    router.push('/login')
}
</script>
<style scoped lang="scss">
.login-hint-dialog-bg {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 10000;
}
.login-hint-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10001;

    .dialog-box {
        width: 60%;
        height: auto;
        box-sizing: border-box;
        padding: 2rem 2rem;
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        h1 {
            font-size: var(--cxl-size-16);
        }
        p {
            font-size: var(--cxl-size-12);
            margin-top: var(--cxl-size-6);
        }
    }

    .btn {
        width: 50%;
        margin: auto;
        background-color: var(--cxl-color-primary);
        font-size: var(--cxl-size-14);
        border-radius: var(--cxl-size-6);
        color: var(--cxl-color-white);
        text-align: center;
        line-height: var(--cxl-size-36);
        margin-top: var(--cxl-size-20);
    }
}
</style>
